<template>
	<div class="custom-upload">
		<el-upload class="upload-demo" :file-list="fileList" list-type="picture-card" :multiple="false" :limit="1"
			name="file" :action="mix_upload_action" :data="upload_data"
			:on-success="(res,file,fileList) => upload_on_success({res,file,fileList})"
			:on-remove="(file, fileList) => upload_on_remove({ file, fileList})" :before-upload="upload_before_upload"
			:on-preview="upload_on_preview">

			<!-- <img v-if="imageUrl" :src="imageUrl" class="upload-image"> -->
			<el-button v-if="!imageUrl" size="small" type="primary">图片</el-button>
		</el-upload>
	</div>
</template>

<script>
	import {
		mapState
	} from "vuex";
	export default {
		name: "w-base-upload",
		components: {},
		props: {
			sku: {
				type: Object,
				default: () => {
					return {}
				}
			}
		},
		data() {
			return {
				upload_data: {
					action: 'upload_uploadImg',
					token:localStorage.getItem("token")
				},

				upload_result_map: {

				},
				fileList: [],

				imageUrl: ''
			};
		},
		computed: {

		},
		created() {

		},
		methods: {
			upload_before_upload(file) {
				console.warn("upload_before_upload");
				const isLt50M = file.size / 1024 / 1024 < 50; //文件大小 小于 50MB
				return isLt50M;
			},
			upload_on_success(option) {
				this.$log('规格信息', this.guige)

				let {
					// item,
					res,
					file,
					fileList
				} = option
				this.$log("upload_on_success option", option);
				if (res.code == 200) {
					let url = res.data.url;
					this.imageUrl = url;
					this.$emit('uploadChange', {
						sku: this.sku,
						url: url
					})
				} else {
					alert(res)
				}
			},
			upload_on_remove(option) {
				let {
					item,
					file,
					fileList,
				} = option;
				this.$log('upload_on_remove option', option)
				// this.upload_result_map[item.field] = fileList;

				this.imageUrl = ''
			},
			upload_on_preview(file) {
				this.dialogImageUrl = file.url;
				this.dialogVisible = true;
			},

			isImageUrl(url = '') {
				// 定义一个包含图片扩展名的数组  
				const imageExtensions = ['jpg', 'jpeg', 'png', 'gif', 'bmp', 'svg'];

				// 获取URL的最后一个部分（通常是文件名），然后检查其扩展名是否在数组中  
				const extension = url.split('.').pop().toLowerCase();
				return imageExtensions.includes(extension);
			},
		},
	};
</script>

<style scoped lang="less">
	/deep/ .el-upload {
		text-align: left;
	}

	/deep/ .el-upload-list__item {
		width: 80px;
		height: 80px;
	}
	
	/deep/ .el-upload--picture-card {
		width: 80px;
		height: 80px;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	

	.custom-upload {
		text-align: left;
	}

	.upload-image {
		width: 50px;
		height: 50px;
	}
</style>